<template>
  <div class="internship-container">
    <el-card shadow="never">
      <!-- 搜索栏 -->
      <div class="filter-header">
        <el-input
          v-model="filter.name"
          placeholder="名称"
          style="width: 120px; margin-left: 15px"
          class="filter-item"
          clearable
        />
        <el-input
          v-model="filter.company"
          placeholder="实习单位"
          style="width: 140px; margin-left: 10px"
          class="filter-item"
          clearable
        />
        <el-button 
          type="primary" 
          style="margin-left: 15px"
          @click="handleSearch"
        >
          <i class="el-icon-search"></i> 搜索
        </el-button>
        <el-button 
          style="margin-left: 10px"
          @click="resetSearch"
        >
          <i class="el-icon-refresh"></i> 重置
        </el-button>
      </div>

      <!-- 数据表格 -->
      <el-table
        :data="filteredData"
        style="width: 100%"
        header-row-class-name="table-header"
        stripe
      >
        <el-table-column prop="serial" label="序号" width="80" align="center">
          <template slot-scope="scope">
            <span style="color: #909399">{{ scope.row.serial }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="名称" width="120"/>
        <el-table-column prop="compute" label="申请要求" width="120"/>
        <el-table-column prop="analysis" label="开始时间" width="120"/>
        <el-table-column label="结束时间" width="150">
          <template slot-scope="scope">{{ scope.row.qcDate }}</template>
        </el-table-column>
        <el-table-column label="申请截止日期" width="150">
          <template slot-scope="scope">{{ scope.row.sepDate }}</template>
        </el-table-column>
        <el-table-column prop="decision" label="实习单位名称" width="150"/>
        <el-table-column prop="score" label="实习单位简介" width="150" show-overflow-tooltip/>
        <el-table-column prop="monitor" label="审核状态" width="120">
          <template slot-scope="scope">
            <el-tag :type="getStatusTagType(scope.row.monitor)" size="small">
              {{ scope.row.monitor }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120" align="center">
          <template slot-scope="scope">
            <el-button 
              type="text" 
              icon="el-icon-edit"
              @click="handleEdit(scope.row)"
            >
              修改
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 编辑对话框 -->
    <el-dialog 
      :title="'修改实习信息 - ' + form.serial"
      :visible.sync="editDialogVisible"
      width="50%"
      @closed="handleDialogClosed"
    >
      <el-form 
        :model="form" 
        :rules="rules" 
        ref="form" 
        label-width="120px"
        label-position="right"
      >
        <el-form-item label="序号" prop="serial">
          <el-input v-model="form.serial" disabled></el-input>
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入实习名称"></el-input>
        </el-form-item>
        <el-form-item label="申请要求" prop="compute">
          <el-input 
            v-model="form.compute" 
            placeholder="请输入申请要求"
          ></el-input>
        </el-form-item>
        <el-form-item label="开始时间" prop="analysis">
          <el-date-picker
            v-model="form.analysis"
            type="date"
            placeholder="选择开始时间"
            value-format="yyyy-MM-dd"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="qcDate">
          <el-date-picker
            v-model="form.qcDate"
            type="date"
            placeholder="选择结束时间"
            value-format="yyyy-MM-dd"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="申请截止日期" prop="sepDate">
          <el-date-picker
            v-model="form.sepDate"
            type="date"
            placeholder="选择截止日期"
            value-format="yyyy-MM-dd"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="实习单位名称" prop="decision">
          <el-input v-model="form.decision" placeholder="请输入实习单位名称"></el-input>
        </el-form-item>
        <el-form-item label="单位简介" prop="score">
          <el-input
            type="textarea"
            :rows="3"
            v-model="form.score"
            placeholder="请输入单位简介"
          ></el-input>
        </el-form-item>
        <el-form-item label="审核状态" prop="monitor">
          <el-select 
            v-model="form.monitor" 
            placeholder="请选择审核状态"
            style="width: 100%"
          >
            <el-option label="已通过" value="已通过"></el-option>
            <el-option label="待审核" value="待审核"></el-option>
            <el-option label="审核中" value="审核中"></el-option>
            <el-option label="未通过" value="未通过"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      filter: {
        name: '',
        company: ''
      },
      tableData: [
        {
          serial: '202301',
          name: '软件开发实习',
          compute: '计算机专业',
          analysis: '2023-03-01',
          qcDate: '2023-06-30',
          sepDate: '2023-03-15',
          decision: '腾讯科技',
          score: '互联网龙头企业，专注于社交、游戏、云计算等领域',
          monitor: '已通过'
        },
        {
          serial: '202302',
          name: '市场营销实习',
          compute: '专业不限',
          analysis: '2023-04-10',
          qcDate: '2023-07-31',
          sepDate: '2023-04-20',
          decision: '阿里巴巴集团',
          score: '电商行业领先企业，涵盖零售、支付、云计算等业务',
          monitor: '待审核'
        },
        {
          serial: '202303',
          name: '机械设计实习',
          compute: '机械工程专业',
          analysis: '2023-05-05',
          qcDate: '2023-08-31',
          sepDate: '2023-05-15',
          decision: '三一重工',
          score: '重型机械制造商，主要生产工程机械、挖掘机等设备',
          monitor: '未通过'
        },
        {
          serial: '202304',
          name: '金融分析实习',
          compute: '金融学专业',
          analysis: '2023-06-01',
          qcDate: '2023-09-30',
          sepDate: '2023-06-10',
          decision: '中信证券',
          score: '头部证券公司，提供证券经纪、投资银行等服务',
          monitor: '已通过'
        },
        {
          serial: '202305',
          name: '建筑设计实习',
          compute: '建筑学专业',
          analysis: '2023-07-01',
          qcDate: '2023-10-31',
          sepDate: '2023-07-10',
          decision: '华东建筑设计院',
          score: '甲级设计资质单位，承接各类大型建筑设计项目',
          monitor: '审核中'
        }
      ],
      editDialogVisible: false,
      form: {},
      rules: {
        name: [
          { required: true, message: '请输入实习名称', trigger: 'blur' }
        ],
        compute: [
          { required: true, message: '请输入申请要求', trigger: 'blur' }
        ],
        analysis: [
          { required: true, message: '请选择开始时间', trigger: 'change' }
        ],
        qcDate: [
          { required: true, message: '请选择结束时间', trigger: 'change' },
          { validator: this.validateEndDate, trigger: 'change' }
        ],
        sepDate: [
          { required: true, message: '请选择申请截止日期', trigger: 'change' },
          { validator: this.validateDeadline, trigger: 'change' }
        ],
        decision: [
          { required: true, message: '请输入实习单位名称', trigger: 'blur' }
        ],
        monitor: [
          { required: true, message: '请选择审核状态', trigger: 'change' }
        ]
      }
    }
  },
  computed: {
    // 过滤后的数据
    filteredData() {
      return this.tableData.filter(item => {
        return (
          (this.filter.name === '' || item.name.includes(this.filter.name)) &&
          (this.filter.company === '' || item.decision.includes(this.filter.company))
        )
      })
    }
  },
  methods: {
    // 搜索功能
    handleSearch() {
      // 计算属性会自动更新
      this.$message({
        message: '搜索完成',
        type: 'success',
        duration: 1000
      })
    },
    
    // 重置搜索条件
    resetSearch() {
      this.filter = {
        name: '',
        company: ''
      }
      this.$message({
        message: '已重置搜索条件',
        type: 'info',
        duration: 1000
      })
    },
    
    // 编辑实习信息
    handleEdit(row) {
      this.form = JSON.parse(JSON.stringify(row))
      this.editDialogVisible = true
    },
    
    // 验证结束时间
    validateEndDate(rule, value, callback) {
      if (!value) {
        callback(new Error('请选择结束时间'))
      } else if (this.form.analysis && new Date(value) < new Date(this.form.analysis)) {
        callback(new Error('结束时间不能早于开始时间'))
      } else {
        callback()
      }
    },
    
    // 验证截止日期
    validateDeadline(rule, value, callback) {
      if (!value) {
        callback(new Error('请选择申请截止日期'))
      } else if (this.form.analysis && new Date(value) > new Date(this.form.analysis)) {
        callback(new Error('申请截止日期不能晚于开始时间'))
      } else {
        callback()
      }
    },
    
    // 对话框关闭
    handleDialogClosed() {
      this.$refs.form.resetFields()
    },
    
    // 提交表单
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // 更新表格数据
          const index = this.tableData.findIndex(item => item.serial === this.form.serial)
          if (index !== -1) {
            this.tableData.splice(index, 1, { ...this.form })
            this.$message.success('修改成功')
            this.editDialogVisible = false
          }
        } else {
          return false
        }
      })
    },
    
    // 获取状态标签类型
    getStatusTagType(status) {
      switch(status) {
        case '已通过': return 'success'
        case '待审核': return 'warning'
        case '审核中': return 'primary'
        case '未通过': return 'danger'
        default: return 'info'
      }
    }
  }
}
</script>

<style scoped>
.internship-container {
  padding: 20px;
}

.main-title {
  color: #303133;
  font-size: 18px;
  margin: 0 15px 0 0;
  display: inline-block;
  font-weight: bold;
}

.filter-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.table-header th {
  background-color: #f5f7fa !important;
  font-weight: 600;
  color: #606266;
}

.el-table {
  margin-top: 20px;
}

.el-table--border th {
  border-right: 1px solid #EBEEF5;
}

.el-table--border td {
  border-right: 1px solid #EBEEF5;
}

.filter-item {
  margin-left: 10px;
}

.el-button--text {
  padding: 0 5px;
}

.el-button [class*="el-icon-"] {
  margin-right: 5px;
}

/* 对话框表单样式 */
.el-form-item {
  margin-bottom: 18px;
}

.el-date-editor, .el-input, .el-textarea, .el-select {
  width: 100%;
}

.el-tag {
  padding: 0 10px;
  height: 24px;
  line-height: 22px;
  font-size: 12px;
}
</style>